<template>
	<view class="container">
		<view class="tab">
			<view :class="['t-item', tab_index==1?'select':'']" @click="tab_index=1">
				<text>商品</text>
			</view>
			<view :class="['t-item', tab_index==2?'select':'']" @click="tab_index=2">
				<text>服务</text>
			</view>
			<view :class="['t-item', tab_index==3?'select':'']" @click="tab_index=3">
				<text>课程</text>
			</view>
			<view class="style-img">
				<image v-if="box_style==1" @click="box_style=2" :src="$img_path('/course/s_i_1.png')" mode="widthFix"></image>
				<image v-if="box_style==2" @click="box_style=1" :src="$img_path('/course/s_i_2.png')" mode="widthFix"></image>
			</view>
		</view>
		
		<!-- 商品足迹 -->
		<view class="list_1" v-if="tab_index==1" :style="{backgroundColor: box_style==2 ? '#FFFFFF' : '#F8F8F8'}">
			<view class="time-list">
				<view class="time">
					5月20日
				</view>
				<view class="goodsList">
					<view class="item-box" :class="box_style==2 ? 'column-class' : 'row-class' " v-for="(item,i) in 5" :style="{width: box_style==2 ? '100%' : '344rpx'}">
						<goodsItem :styleType="box_style" :imageStyle="{width:box_style==2 ? '260rpx' : '344rpx',height:box_style==2 ? '260rpx' : '344rpx'}">
							<text slot="center" style="margin-top: 16rpx;display: block;">销量：1000</text>
							<view slot="tagList" class="tagList">
								<view class="tag-item">
									标签标签
								</view>
								<view class="tag-item">
									标签
								</view>
							</view>
						</goodsItem>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 服务足迹 -->
		<view class="list_1 list_2" v-if="tab_index==2" :style="{backgroundColor: box_style==2 ? '#FFFFFF' : '#F8F8F8'}">
			<view class="time-list">
				<view class="time">
					5月20日
				</view>
				<view class="goodsList">
					<view class="item-box" :class="box_style==2 ? 'column-class' : 'row-class' " v-for="(item,i) in 5" :style="{width: box_style==2 ? '100%' : '344rpx'}">
						<goodsItem :styleType="box_style" :box_bg="box_style==2?'#FFFFFF':'#FFFFFF00'" :imageStyle="{width:box_style==2 ? '324rpx' : '344rpx',height:box_style==2 ? '232rpx' : '246rpx'}">
							<text slot="center" style="margin-top: 16rpx;display: block;">销量：1000</text>
							<view slot="tagList" class="tagList">
								<view class="tag-item">
									标签标签
								</view>
								<view class="tag-item">
									标签
								</view>
							</view>
							<view slot="priceBox" class="priceBox">
								<view class="price">
									<text>¥ 100</text>
									<text>/台</text>
								</view>
								<view class="n">
									￥150
								</view>
							</view>
						</goodsItem>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 课程足迹 -->
		<view class="list_1 list_3" v-if="tab_index==3" :style="{backgroundColor: box_style==2 ? '#FFFFFF' : '#F8F8F8'}">
			<view class="time-list">
				<view class="time">
					5月20日
				</view>
				<view class="goodsList">
					<view class="item-box" v-for="(item,i) in 5" :style="{width: box_style==2 ? '100%' : '344rpx'}">
						<courseItem :styleType="box_style" :box_bg="box_style==2?'#FFFFFF':'#FFFFFF00'" :imageStyle="{width:box_style==2 ? '260rpx' : '344rpx',height:box_style==2 ? '260rpx' : '246rpx'}">
							<text slot="center" style="margin-top: 16rpx;display: block;font-weight: 400;font-size: 24rpx;color: #0291FF;line-height: 34rpx;">100人已报名</text>
						</courseItem>
					</view>
				</view>
			</view>
		</view>
		
		
		<div class="kong"></div>
		<div class="kong"></div>
		<div class="kong"></div>
		<view class="bottom position-fixed display-flex alig  ">
			<view class="padding-about-34 width-100 display-flex alig center">
				<view class="display-flex alig">
					<view @click="login()" class="button text-center color-FFF font-size-26"
						style="padding: 20rpx 286rpx;">
						清空
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	import goodsItem from '@/components/service-box/mall-item-box.vue'
	import courseItem from '@/components/service-box/goods-box.vue'
	export default {
		components: {
			goodsItem,
			courseItem
		},
		data() {
			return {
				box_style:1,
				tab_index:1,
			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.container{
		.tab{
			position: fixed;
			left: 0;
			right: 0;
			top: -1rpx;
			width: 100%;
			height: 88rpx;
			background-color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 60rpx;
			box-sizing: border-box;
			z-index: 5;
			.t-item{
				text{
					font-weight: 400;
					font-size: 30rpx;
					color: #999999;
					line-height: 42rpx;
				}
				&.select{
					text{
						color: #333333;
						position: relative;
						&::before{
							content: '';
							width: 60rpx;
							height: 4rpx;
							background: #E72A2A;
							border-radius: 2rpx;
							position: absolute;
							top: calc(100% + 10rpx);
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
			}
			.style-img{
				image{
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		
		.list_1{
			padding-top: 88rpx;
			background-color: #FFFFFF;
			padding: 88rpx 22rpx 0;
			box-sizing: border-box;
			.time-list{
				.time{
					padding: 40rpx 0 20rpx;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					line-height: 40rpx;
				}
				
				.goodsList{
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
					.item-box{
						box-sizing: border-box;
						// margin-bottom: 14rpx;
						&.column-class{
							padding: 20rpx 0;
							border-bottom: 2rpx solid #F8F8F8;
							&:first-child{
								padding-top: 0;
							}
						}
						&.row-class{
							border: 2rpx solid #F3F3F3;
							border-radius: 20rpx;
							margin-bottom: 20rpx;
						}
						.tagList{
							display: flex;
							align-items: center;
							margin-top: 16rpx;
							.tag-item{
								// width: 118rpx;
								height: 34rpx;
								border-radius: 6rpx 6rpx 6rpx 6rpx;
								border: 2rpx solid #0291FF;
								font-weight: 400;
								font-size: 20rpx;
								color: #0291FF;
								// line-height: 34rpx;
								text-align: center;
								padding: 3rpx 12rpx;
								box-sizing: border-box;
								margin-left: 12rpx;
								&:first-child{
									background: #FF6602;
									border-color: #FF6602;
									color: #FFFFFF;
									margin-left: 0;
								}
							}
						}
						
					}
				}
			}
			
		}
		.list_2{
			.goodsList{
				.priceBox{
					display: flex;
					align-items: flex-end;
					.price{
						text:first-child{
							font-weight: 900;
							font-size: 42rpx;
							color: #FF2E2E;
							line-height: 58rpx;
						}
						text:last-child{
							font-weight: 400;
							font-size: 20rpx;
							color: #FF4A4A;
							line-height: 48rpx;
						}
					}
					.n{
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 48rpx;
						margin-left: 16rpx;
						text-decoration: line-through;
					}
				}
			}
		}
		
		.list_3{
			
		}
		
	}
	
	.tans {
		padding: 4rpx 20rpx;
		font-size: 18rpx;
		border-radius: 6rpx;
	}

	.bottom {
		bottom: 0;
		width: 750rpx;
		height: 134rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 8rpx 2rpx rgba(0, 0, 0, 0.05);
	}

	.view {
		padding: 20rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 12rpx 2rpx rgba(223, 223, 223, 0.16);
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}
</style>